{extend name="common/head"/}
{block name="body"}
<div class="container-fluid p-t-15">

	<div class="row">

		<div class="col-lg-12">
			<div class="card">
				<header class="card-header">
					<div class="card-title">功能菜单</div>
				</header>
				<div class="card-body">

					<div class="toolbar-btn-action" id="toolbar2">
						<button class="btn btn-primary m-r-5" onclick="sadd()" type="button">添加</button>
						<button class="btn btn-primary m-r-5" onclick="test()" type="button">删除</button>
					</div>

					<table class="tree-table"></table>
				</div>
			</div>
		</div>

	</div>

</div>

{/block}
{block name="script"}
{include file="common/footer" base="base" /}
<!--以下是tree-grid的使用示例-->
<link href="{__ADMIN__}/js/jquery-treegrid/jquery.treegrid.min.css" rel="stylesheet">
<script src="{__ADMIN__}/js/jquery-treegrid/jquery.treegrid.min.js" type="text/javascript"></script>
<script src="{__ADMIN__}/js/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js"
		type="text/javascript"></script>
<script type="text/javascript">

	var $treeTable = $('.tree-table');
	$treeTable.bootstrapTable({
		url: '/admin/menu/index',
		type: 'get',
		idField: 'id',
		uniqueId: 'id',
		dataType: 'json',
		toolbar: '#toolbar2',
		showRefresh: true, // 是否显示刷新按钮
		columns: [
			{
				field: 'check',
				checkbox: true
			},
			{
				field: 'title',
				title: '名称'
			},
			{
				field: 'icon',
				title: '图标'
			},
			{
				field: 'pid',
				title: '父级ID'
			},
			{
				field: 'src',
				title: '路径'
			},
			{
				field: 'operate',
				title: '操作',
				align: 'center',
				events: {
					'click .role-add': function (e, value, row, index) {
						add(row.id);
					},
					'click .role-delete': function (e, value, row, index) {
						del(row.id);
					},
					'click .role-edit': function (e, value, row, index) {
						update(row.id);
					}
				},
				formatter: operateFormatter
			}
		],

		treeShowField: 'title',
		parentIdField: 'pid',

		onResetView: function (data) {
			$treeTable.treegrid({
				initialState: 'collapsed', // 所有节点都折叠
				treeColumn: 1,
				//expanderExpandedClass: 'mdi mdi-folder-open',  // 可自定义图标样式
				//expanderCollapsedClass: 'mdi mdi-folder',
			});

			// 只展开树形的第一集节点
			//$treeTable.treegrid('getRootNodes').treegrid('expand');
		},
		onCheck: function (row) {
			var datas = $treeTable.bootstrapTable('getData');

			selectChilds(datas, row, 'id', 'pid', true); // 选择子类

			selectParentChecked(datas, row, 'id', 'pid'); // 选择父类

			$treeTable.bootstrapTable('load', datas);
		},

		onUncheck: function (row) {
			var datas = $treeTable.bootstrapTable('getData');
			selectChilds(datas, row, 'id', 'pid', false);
			$treeTable.bootstrapTable('load', datas);
		},
	});

	// 操作按钮
	function operateFormatter(value, row, index) {
		return [
			'<a type="button" class="role-add btn btn-xs btn-default m-r-5" title="添加" data-toggle="tooltip"><i class="mdi mdi-plus"></i></a>',
			'<a type="button" class="role-edit btn btn-xs btn-default m-r-5" title="修改" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>',
			'<a type="button" class="role-delete btn btn-xs btn-default" title="删除" data-toggle="tooltip"><i class="mdi mdi-delete"></i></a>'
		].join('');
	}

	/**
	 * 选中父项时，同时选中子项
	 * @param datas 所有的数据
	 * @param row 当前数据
	 * @param id id 字段名
	 * @param pid 父id字段名
	 */
	function selectChilds(datas, row, id, pid, checked) {
		for (var i in datas) {
			if (datas[i][pid] == row[id]) {
				datas[i].check = checked;
				selectChilds(datas, datas[i], id, pid, checked);
			}

		}
	}

	function selectParentChecked(datas, row, id, pid) {
		for (var i in datas) {
			if (datas[i][id] == row[pid]) {
				datas[i].check = true;
				selectParentChecked(datas, datas[i], id, pid);
			}

		}
	}

	function add(id) {
		parent.$(parent.document).data('multitabs').create({
			iframe : true,                                // 指定为iframe模式，当值为false的时候，为智能模式，自动判断（内网用ajax，外网用iframe）。缺省为false。
			title : '添加菜单',                     // 标题（可选），没有则显示网址
			url : '/admin/menu/add?pid=' + id                    // 链接（必须），如为外链，强制为info页
		}, true);
	}

	function sadd() {
		parent.$(parent.document).data('multitabs').create({
			iframe : true,                                // 指定为iframe模式，当值为false的时候，为智能模式，自动判断（内网用ajax，外网用iframe）。缺省为false。
			title : '添加菜单',                     // 标题（可选），没有则显示网址
			url : '/admin/menu/add'                    // 链接（必须），如为外链，强制为info页
		}, true);
	}

	function del(id) {
		$.confirm({
			title: '提示',
			content: '您确定要删除吗？',
			icon: 'mdi mdi-alert',
			animation: 'scale',
			closeAnimation: 'zoom',
			buttons: {
				confirm: {
					text: '确认，取消',
					btnClass: 'btn-orange',
					action: function() {
						$.ajax({
							url: "/admin/menu/delete",
							type: 'post',
							data: { id: id },
							success: function (e) {
								if (e.code == 0) {
									$(".tree-table").bootstrapTable('refresh');
								}
							}
						})
					}
				},
				'取消': function() {

				}
			}
		});
	}

	function update(id) {
		parent.$(parent.document).data('multitabs').create({
			iframe : true,                                // 指定为iframe模式，当值为false的时候，为智能模式，自动判断（内网用ajax，外网用iframe）。缺省为false。
			title : '编辑节点',                     // 标题（可选），没有则显示网址
			url : '/admin/menu/edit?pid=' + id                    // 链接（必须），如为外链，强制为info页
		}, true);
	}

	function test() {
		var selRows = $treeTable.bootstrapTable("getSelections");
		if (selRows.length == 0) {
			alert("请至少选择一行");
			return;
		}
		console.log(selRows);

		var postData = "";
		$.each(selRows, function (i) {
			postData += this.id;
			if (i < selRows.length - 1) {
				postData += "， ";
			}
		});
		alert("你选中行的 id 为：" + postData);
	}
</script>
{/block}
</body>
</html>